<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <form action="" method="post" enctype="application/x-www-form-urlencoded"></form>
  <h1>动画DOM操作</h1>
  <button>改变</button>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    /**
     * 动画DOM以及CSS操作
     * 
     */
    $('button').on("click", function(){
      $("h1").stop().animate({}, 1000).delay(1000).animate({})
    })
    /**
     * Ajax通过异步提升用户体验、JavaScript是单线程排队
     * 优化浏览器和服务器的传输，减少不必要的数据往返
     * Ajax引擎在客户端运行，承担了一部分服务器的工作
     * 
     * XMLHttpRequest对象
     *    支持异步请求的技术，ajax的核心，可以向服务器发出请求并处理响应
     *    可以在页面加载后进行局部更新
     * 
     */
    
    // 封装通用的xhr对象
    function createXHR(){
      // 判断浏览器是否将XMLHttpRequest作为本地对象实现 ie7 firefox
      if(typeof XMLHttpRequest != 'undefined'){
        return new XMLHttpRequest()
      }else if(typeof ActiveXObject != 'undefined'){
        // 将所有可能出现版本放到数组
        var xhrArr = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0']
        // 遍历创建XMLHttpRequest对象
        var len = xhrArr.length, xhr
        for(var i = 0; i<len; i++){
          try{
            xhr = new ActiveXObject(xhrArr[i])
            break;
          }catch(e){

          }
        }
        return xhr
      } else {
        throw new Error("not import xhr object")
      }
    }

    var xhr = createXHR()
    // 响应xhr对象状态变化的函数 在onreadystatechange有变化时执行fuction
    xhr.onreadystatechange = function(){
      // 异步调用成功,响应内容解析完成
      if(xhr.readyState === 4){
        if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
          var data = JSON.parse(xhr.responseText)
          // var data = eval("(" + xhr.responseText + ")")
          console.log(data)
          // 渲染页面
          // renderDataToDom(data)
        }
      }
    }
    xhr.open('get', './a.json', true)
    // post 请求头 如果需要在send中传值，则需要设置请求头Content-type 发送请求之前对表单数据进行编码
    // xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
    // send 仅post需要传递参数get为null
    xhr.send(null)

    // json三种类型 字符串、数值、布尔值、null、数组、对象

    function renderDataToDom(data){
      var img = data.slider,i,len= img.length,str='',
                banner=document.getElementById("banner");
      for(i=0;i<len;i++){
        str += '<a href="'+img[i].linkUrl+'"><img src="'+img[i].picUrl+'"></a>'
      }
      banner.innerHTML(str)
    }

    /**
     * jQuery中的$.ajax
     */

    $.ajax({
      url: 'a.json',
      type: 'get',
      async: true,
      dataType: 'json',
      success: function(imgData){
        var str = ''
        $.each(data, function(index, item){
          str += index
        })
        $("#banner").html(str)
      }
    })


    /**
     * 跨域
     *    同源策略：域名、协议、端口相同
     * 解决跨域
     *    跨域资源共享（CORS）
     *    使用JSONP
     *    修改document.domain
     *    window.name
     * JSONP
     *    json with padding JSONP的组成：回调函数和数据
     *    原理：引入不同域的js脚本文件是可以的
     *        通过script标签引入js文件
     *        js文件载入成功后
     *        执行我们在url参数中指定的函数
     * 
     * src href 可以跨域 利用可以访问别的域名的属性
     */
    
    // 封装JSONP 动态创建script标签，通过src进行跨域
    // 1.处理url，后面跟参数
    function getJSONP(url, callback){
      if(!url){
        return;
      }
      var a = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
          r1 = Math.floor(Math.random()*10),
          r2 = Math.floor(Math.random()*10),
          r3 = Math.floor(Math.random()*10),
          name = 'getJSONP' + a[r1] + a[r2] + a[r3], // 生成随机的函数名
          cbname = 'getJSONP.' + name;

      console.log(cbname)
      // http://www.baidu.com?callback=abc 你需要给服务器的就是函数名
      // abc([{user:1},{id:2}]) 服务端传给客户端的数据
    }
    getJSONP('http://www.baidu.com')
  </script>
</body>
</html>